<template>
	<div id="templ">
		<mt-swipe :auto="3000">
		  	<mt-swipe-item v-for = "item in list"><img :src="item.img" class="lunbo"></mt-swipe-item>
		</mt-swipe>
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/goods/goodslist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/feedback">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/video">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/callback">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		        </ul> 
		</div>

	</div>
	
</template>


<script>
	export default {
		data:function(){
			return {
				list:[]
			}
		},
		methods:{
			getData:function(){
				var url = this.$common.apidomain+"/api/getlunbo"
				this.$http.get(url).then(function(res){
					if(res.body.status !=0) {
						this.Toast(res.body.message);
						return;
					}

					this.list = res.body.message;
				})
			}
		},
		created:function(){
			this.getData();
		}
	}


</script>



<style scoped>
	.mint-swipe {
		height: 300px;
	}
	.mint-swipe-item {
		background-color: red;
	}
	.lunbo {
		width: 100%;
		height: 100%;
	}
	.mui-content,.mui-content ul {
		border: 0;
		background-color: white;
	}
	.mui-content .mui-table-view li {
		border: 0;
	}
	.mui-content .mui-table-view li span::before {
		 content: "";
		display: inline-block;
		width: 40px;
		height: 40px; 
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.mui-content .mui-table-view li:nth-of-type(1) span::before {
		background-image: url(../../static/imgs/1.png);
	}
	.mui-content .mui-table-view li:nth-of-type(2) span::before {
		background-image: url(../../static/imgs/2.png);
	}
	.mui-content .mui-table-view li:nth-of-type(3) span::before {
		background-image: url(../../static/imgs/3.png);
	}
	.mui-content .mui-table-view li:nth-of-type(4) span::before {
		background-image: url(../../static/imgs/4.png);
	}
	.mui-content .mui-table-view li:nth-of-type(5) span::before {
		background-image: url(../../static/imgs/5.png);
	}
	.mui-content .mui-table-view li:nth-of-type(6) span::before {
		background-image: url(../../static/imgs/6.png);
	}
</style>